<template>
  <div class="header">
    <div class="header-left">
      <div class="header__logo pl-5">
        <p class="font_extralarge font_lineheight_normal">{{$globalData.title}}</p>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="header__quickentry">
          <div class="block" @click="go('/')">
            <i class="el-icon-odometer"></i>
            <p class="font_medium">首页</p>
          </div>

          <div class="block" @click="clickDownload">
            <i class="el-icon-notebook-2"></i>
            <p class="font_medium">使用指南</p>
          </div>

            <!-- 打开  -->
            <template v-if="isadmin == 1">
              <div class="block ml-4" @click="linkApi">
                <i class="el-icon-notebook-2"></i>
                <p class="font_medium">API</p>
              </div>
            </template>

            <el-dropdown v-if="isadmin == 1" @command="onClickItem" trigger="click">
              <span class="el-dropdown-link" style="cursor:pointer">
                系统初始化配置<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-item command="/system/module">菜单</el-dropdown-item>
                <el-dropdown-item command="/system/permission" >许可（权限）</el-dropdown-item>
                <el-dropdown-item command="/system/t-dic">数据字典</el-dropdown-item>
                <el-dropdown-item command="/system/t-dictype">数据字典类型</el-dropdown-item>
              </template>
            </el-dropdown>        
      </div>
    </div>

    <div class="header-right">
      <el-divider direction="vertical"></el-divider>
      <div class="header__account ml-5 mr-5">

        <el-dropdown  trigger="click">
          <span class="el-dropdown-link">
            <el-avatar shape="square" :size="50" :src="avatarUrl"></el-avatar>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <template #dropdown>
            <div class="header__account__dropdown_item mt-3">
              <p class="header__account__dropdown__message">欢迎， {{username}}</p>
            </div>
            <!-- <div class="header__account__dropdown_item" title="所属公司">
              <i class="el-icon-office-building"></i>
              <p class="header__account__dropdown__company">{{company}}</p>
            </div> -->
            <div class="header__account__dropdown_item" title="当前权限">
              <i class="el-icon-key"></i>
              <p class="header__account__dropdown__role">{{rolename}}</p>
            </div>

            <el-dropdown-item>
              <div @click="goEditProfile">
                <i class="el-icon-setting"></i>编辑个人资料
              </div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div class="header__account__dropdown_item" @click="logout">
                <i class="el-icon-switch-button"></i>退出系统
              </div>
            </el-dropdown-item>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'
import { ElMessage } from 'element-plus'


export default defineComponent({
  name: 'AppHeader',

  data(){
    return {
      avatarUrl : "/static/manager3/img/default_handsome.jpg",
    }
  },

  methods:{
    logout(){
      ElMessage("正在注销，请稍后");

      this.logOutAction()
        .then(()=>{
            // ElMessage.success("注销成功");
            this.$router.push("/pages/login")
        })
    },


    onClickItem(e:any){
      this.$router.push(e);


    },

    goEditProfile(){
      this.$router.push(
        {
          path: "/system/account/dashboard"
        }
      )
    },

    forget(){
      // console.log("forget")
    }
  },

  computed:{
    ...mapGetters({
      username: 'managercore/profiles/username',
      rolename: 'managercore/profiles/rolename',
      isadmin: 'managercore/profiles/isadmin'
    })
  },

  mounted(){
    // console.log("on mounted Header")
    console.log("username",this.username)
    console.log("isadmin",this.isadmin)
  },

  setup(){
    const store = useStore()

    return {
      logOutAction:()=> store.dispatch('managercore/profiles/logOutAction')
    }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "@/manager-core/style/scss/style.scss";

.header{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}

.header-left{
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.header__logo{
  width: 200px;
  flex: 0 0 auto;
}

.header__quickentry{
    display: flex;
    align-items: center;
    justify-content:  flex-start;
    color: $Text-Primary-2-color;
    flex: 0 1 auto;


    .block{
        width: 100px;
        text-align: center;
        cursor: pointer;
        transition: color .15s linear;

        display: flex;
        flex-wrap: nowrap ; // 换行 nowrap | wrap | wrap-reverse
        flex-direction:row; //| row-reverse | column | column-reverse;
        justify-content:  flex-start; // 定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
        align-items:  center; // | flex-end | center | baseline | stretch;

        i{
            padding-right: 5px;
            font-size: 1.3rem;
        }

        &:hover{
            color: $Primary-color;
        }

        >p {
            line-height: 20px;   
        }
    }

}

.header__tool{

    display: flex;
    align-items: center;
    justify-content:  flex-end;
    padding-right: 10px;

    i { 
        font-size: 24px;
        color: #606266;
        transition: color .15s linear;

        &:hover{
            color: $Primary-color;
        }
    }

}


.header__account__col{
    transition: background-color 1s linear;

    &:hover{
        background-color: $Info-2-color;
    }  
}

.header-right{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

  flex: 1 0 auto;

}

.header__account{
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content:  flex-end;

}


.header__account__dropdown__message{
    font-size: $FontSize-Base; 
    color: $Text-Primary-color;
}

.header__account__dropdown__company{
    font-size: $FontSize-Small; 
    color: $Text-Primary-3-color;
}

.header__account__dropdown__role{
    font-size: $FontSize-Small; 
    color: $Warning-color;
}

.header__account__dropdown_item{
    padding-left: 20px;
    display: flex;
    flex-wrap: nowrap ; // 换行 nowrap | wrap | wrap-reverse
    flex-direction:row; //| row-reverse | column | column-reverse;
    justify-content:  flex-start; // 定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
    align-items:  center; // | flex-end | center | baseline | stretch;

    i {
        margin-right: 5px;
        font-size: 12px;
    }

    p {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}


</style>
